﻿@using QLNS
@{
    ViewBag.Title = "Add";
    Layout = "~/Views/Shared/_Home.cshtml";
}
<link rel="stylesheet" href="@Url.Content("~/Content/jquery-ui.css")" />
<script src="@Url.Content("~/Scripts/jquery-ui1.js")" type="text/javascript"></script>      
@{    
    List<SelectListItem> selectListIDQLNN = new List<SelectListItem>();
    List<ChucVu> idqlnn = ViewBag.DSChucVu;
    foreach (var l in idqlnn)
    {
        SelectListItem item = new SelectListItem();
        item.Text = l.Ten;
        item.Value = l.ID.ToString();
        selectListIDQLNN.Add(item);
    }
    
    
} 

@using (Html.BeginForm("Add", "Process", FormMethod.Post, new { name = "form", id = "submit" }))
{ 
    <div class="toolbar">
        <ul>
            <li><input class="tbtnBack" type="button" value="Quay về" onclick="javascript:history.back()"/>
            </li>
            <li><input class="tbtnSave" type="Submit" value="Lưu" /> 
            </li>
        </ul>
        <div class="ttitle">Thêm mới Hồ sơ</div>
    </div>
    <table width="500" border="1">
    <tr>
    
        <td>Cơ quan </td>
    <td>@Html.TextBox("CoQuan")</td>
  </tr>
     <tr>
    
        <td>Chức vụ </td>
    <td>@Html.DropDownList("IDChucVu", selectListIDQLNN)</td>
  </tr>
  <tr>
    <td>Từ ngày</td>
    <td>    
   
    @{
         DateTime dt = DateTime.Now;     
         @Html.TextBox("TuNgay", dt.ToString("dd/MM/yyyy"))
    } 
   
    </td>

  </tr>
    <tr>
    <td>Đến ngày</td>
    <td>       
        @Html.TextBox("DenNgay", dt.ToString("dd/MM/yyyy"))
    </td>

  </tr>
  <tr>
    <td>Tên ngạch công chức</td>
    <td>
        <select class="combobox" id="TenNgachCC" name="TenNgachCC" style="display:none;"></select>
    </td>
    </tr>
    <tr> 
    <td>Mã ngạch</td>    
    <td>
        <select class="combobox" id="MaNgachCC" name="MaNgachCC" style="display:none;"></select>
    </td>
    </tr>
    <tr>
    <td>Bậc lương</td>
    <td>@Html.TextBox("BacLuongCBCC")</td>
    </tr>
    <tr> 
    <td>Ghi chú</td>
    
    <td>@Html.TextBox("GhiChu")
    </td>
    </tr>
    <tr>
    <td>Thống kê</td>
        <td>
            @Html.CheckBox("IsThongKe") 
            
        </td>

    </tr>
</table>

        <input type="hidden" name="IDCanBo" value="@ViewBag.Id" />
        <input id="botton" type="Submit" value="Lưu" class="btnSave" />
 }
 <script type="text/javascript" language="javascript">
     $(document).ready(function () {
         $('#TenNgachCC').combobox({
             select: function (event, ui) {                 
                 $.getJSON("/Process/GetDSTenNgachCC/", null,
                    function (data) {
                        var select = $('#MaNgachCC');
                        select.empty();
                        $.each(data, function (index, itemData) {
                            if (itemData.Value == ui.item.value) {
                                select.append($('<option/>', {
                                    value: itemData.Key,
                                    text: itemData.Key
                                }));
                            }
                        });
                    });
             }
         });
         $('#MaNgachCC').combobox({
             select: function (event, ui) {
                 $.getJSON("/Process/GetDSTenNgachCC/", null,
                    function (data) {
                        var select = $('#TenNgachCC');
                        select.empty();
                        $.each(data, function (index, itemData) {
                            if (itemData.Key == ui.item.value) {
                                select.append($('<option/>', {
                                    value: itemData.Value,
                                    text: itemData.Value
                                }));
                            }
                        });
                    });
             }
         });
         $.getJSON("/Process/GetDSTenNgachCC/", null,
                            function (data) {
                                var select = $('#TenNgachCC');
                                select.empty();
                                $.each(data, function (index, itemData) {
                                    select.append($('<option/>', {
                                        value: itemData.Value,
                                        text: itemData.Value
                                    }));
                                });
                                var select = $('#MaNgachCC');
                                select.empty();
                                $.each(data, function (index, itemData) {
                                    select.append($('<option/>', {
                                        value: itemData.Key,
                                        text: itemData.Key
                                    }));
                                });
                            });
     });
     
 </script>

 <script type="text/javascript" language="javascript">
       $("#submit").submit(function () {
           if ($("#CoQuan").val().toString() == "") {
               jqxAlert.alert("Vui lòng nhập tên cơ quan!");
               return false;
           }

           if ($("#TuNgay").val().toString() == "") {
               jqxAlert.alert("Vui lòng nhập ngày bắt đầu!");
               return false;
           }
           if ($("#DenNgay").val().toString() == "") {
               jqxAlert.alert("Vui lòng nhập ngày kết thúc!");
               return false;
           }
           if ($("#TenNgachCC").val().toString() == "") {
               jqxAlert.alert("Vui lòng nhập tên ngạch công chức!");
               return false;
           }
           if ($("#MaNgachCC").val().toString() == "") {
               jqxAlert.alert("Vui lòng nhập mã ngạch công chức!");
               return false;
           }
           if ($("#BacLuongCBCC").val().toString() == "") {
               jqxAlert.alert("Vui lòng nhập bậc lương!");
               return false;
           }
           if (! parseInt($("#BacLuongCBCC").val().toString())) {
               jqxAlert.alert("Vui lòng nhập chính xác bậc lương!");
               return false;
           }
       });
 </script>
 <script>
     (function ($) {
         $.widget("custom.combobox", {
             _create: function () {
                 this.wrapper = $("<span>")
          .addClass("custom-combobox")
          .insertAfter(this.element);

                 this.element.hide();
                 this._createAutocomplete();
                 this._createShowAllButton();
             },

             _createAutocomplete: function () {
                 var selected = this.element.children(":selected"),
          value = selected.val() ? selected.text() : "";

                 this.input = $("<input>")
          .appendTo(this.wrapper)
          .val(value)
          .attr("title", "")
          .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
          .autocomplete({
              delay: 0,
              minLength: 0,
              source: $.proxy(this, "_source")
          })
          .tooltip({
              tooltipClass: "ui-state-highlight"
          });

                 this._on(this.input, {
                     autocompleteselect: function (event, ui) {
                         ui.item.option.selected = true;
                         this._trigger("select", event, {
                             item: ui.item.option
                         });
                     },

                     autocompletechange: "_removeIfInvalid"
                 });
             },

             _createShowAllButton: function () {
                 var input = this.input,
          wasOpen = false;

                 $("<a>")
          .attr("tabIndex", -1)
          .attr("title", "Show All Items")
          .tooltip()
          .appendTo(this.wrapper)
          .button({
              icons: {
                  primary: "ui-icon-triangle-1-s"
              },
              text: false
          })
          .removeClass("ui-corner-all")
          .addClass("custom-combobox-toggle ui-corner-right")
          .mousedown(function () {
              wasOpen = input.autocomplete("widget").is(":visible");
          })
          .click(function () {
              input.focus();

              // Close if already visible
              if (wasOpen) {
                  return;
              }

              // Pass empty string as value to search for, displaying all results
              input.autocomplete("search", "");
          });
             },

             _source: function (request, response) {
                 var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                 response(this.element.children("option").map(function () {
                     var text = $(this).text();
                     if (this.value && (!request.term || matcher.test(text)))
                         return {
                             label: text,
                             value: text,
                             option: this
                         };
                 }));
             },

             _removeIfInvalid: function (event, ui) {

                 // Selected an item, nothing to do
                 if (ui.item) {
                     return;
                 }

                 // Search for a match (case-insensitive)
                 var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
                 this.element.children("option").each(function () {
                     if ($(this).text().toLowerCase() === valueLowerCase) {
                         this.selected = valid = true;
                         return false;
                     }
                 });

                 // Found a match, nothing to do
                 if (valid) {
                     return;
                 }

                 // Remove invalid value
                 this.input
          .val("")
          .attr("title", value + " didn't match any item")
          .tooltip("open");
                 this.element.val("");
                 this._delay(function () {
                     this.input.tooltip("close").attr("title", "");
                 }, 2500);
                 this.input.autocomplete("instance").term = "";
             },

             _destroy: function () {
                 this.wrapper.remove();
                 this.element.show();
             }
         });
     })(jQuery);

     $(function () {
         $(".combobox").combobox(); 
     });
  </script>
  <style type="text/css">
  .custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
  }
  </style>